<template>
  <Portlet title="备注" >
    <el-form label-position="left" label-width="120px">
      <el-row :gutter="15">
        <el-col :lg="8" :md="12"  :xl="6">
          <el-form-item label="外部单号：">
            <span>{{ orderSourceNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :md="12"  :xl="6">
          <el-form-item label="接单价：">
            <span v-if="state == 'edit'">{{ pickOrderMoney }} 元 <a href="javascript:;" class="blue-color" style="padding-left: 30px" @click="edit">修改</a></span>
            <el-form v-if="state != 'edit'" :model="model" :label-position="labelPosition" :rules="rules" ref="ruleForm">
              <el-form-item label="" prop="pickMoney" style="width: 80%">
                <el-input v-model="model.pickMoney">
                  <el-button slot="append" @click.prevent="save" :loading="loading">保存</el-button>
                </el-input>
              </el-form-item>
            </el-form>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :md="12"  :xl="6">
          <el-form-item label="总货值：">
            <span>{{ cargoPrice }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15" v-if="orderSourceWarehouse">
        <el-col :lg="8" :md="12"  :xl="6">
          <el-form-item label="推单来源：">
            <span>{{ orderSourceWarehouse | filterDataBaseDictionary }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :md="12"  :xl="6">
          <el-form-item label="推单单号：">
            <span>{{ outNo }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :lg="8" :md="12"  :xl="6">
          <el-form-item label="订单备注：">
            <span>{{ memo }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </Portlet>
</template>
<script>
import {dotData} from '@/utils'
import {filterDataBaseDictionary} from '@/filters'
import {isFormatNumber} from '@/utils/validate'
export default {
  name: 'writeOff',
  data() {
    return {
      state: 'edit',
      loading: false,
      labelPosition: 'left',
      model: {
        pickMoney: ''
      },
      rules: {
        pickMoney: [
          { validator: isFormatNumber, int: 7, decimal: 2, message: '输入8位以下整数或2位小数', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
  },
  filters: {
    filterDataBaseDictionary
  },
  props: {
    orderDetail: {
      type: Object,
      required: true
    }
  },
  computed: {
    orderSourceNo() {
      return dotData(this.orderDetail, 'fhbOrder.orderSourceNo')
    },
    memo() {
      return dotData(this.orderDetail, 'fhbOrder.memo')
    },
    orderSourceWarehouse() {
      return dotData(this.orderDetail, 'fhbOrder.orderSourceWarehouse')
    },
    outNo() {
      return dotData(this.orderDetail, 'fhbOrder.outNo')
    },
    pickOrderMoney() {
      return dotData(this.orderDetail, 'fhbOrder.pickOrderMoney')
    },
    cargoPrice() {
      return dotData(this.orderDetail, 'fhbOrder.cargoPrice')
    },
    fhbOrderId() {
      return dotData(this.orderDetail, 'fhbOrder.id')
    }
  },
  methods: {
    edit() {
      this.state = 'save'
      this.model.pickMoney = this.pickOrderMoney
    },
    save() {
      this.$refs['ruleForm'].validate((valid) => {
        console.log('valid', valid)
        if (!valid) {
          return
        }
        this.model.orderId = this.fhbOrderId
        this.loading = true
        this.$ajax.post('/ms-fahuobao-order/FhbOrder/modifyPickMoney', this.model).then(response => {
          this.loading = false
          this.state = 'edit'
          this.$emit('refresh')
          this.$message({
            type: 'success',
            message: '提交成功!'
          })
          this.$router.push({path: '/redirect' + this.$route.fullPath, query: {tab: '2'}})
        })
      })
    }
  }
}
</script>
